Maps for WebSTAR

This is a very basic introduction to creating map images for use on your WebSTAR site. I will not bother to cover all of the possible options for map processing or image creation. This should be enough to get you going, though.

Description of maps

If you're reading this, you probably have already heard of maps. No, not those folding paper things that seem to breed wildly in the glove compartment of your car. There is no way those things could be transmitted over the World Wide Web, at least not without another extension to HTTP. When I talk about maps, I'm talking about a special kind of inline graphic that can be used in WWW pages. A map is a graphic that has "hot" areas designated that act like buttons. Each button is linked to a specific URL. When users click on the map graphic, the clicks are translated and the user is sent to whatever URL maps to the area clicked on (there is a default URL which is used if no button is clicked on).

What Can Be Done with Maps

Maps are just a flashy list of URL's. They require an extra graphic (which means more download time) and extra processing by the server. Because of that, they should only be used when they present a distinct advantage to the user in deciding how to navigate the pages. Of course, noone follows that rule. The real rule is "only use maps when you want to" which is why so many sites have maps on their pages. Actually, at the end of this document I list a couple of valid reasons to use a map. But don't let that stop you.

Here are some samples of maps at various sites to give you an idea of how they can best be used:

How Maps Work (the basics)

We'll go into more detail on this later, but for now you need at least a basic understanding of how everything will fit together.

First, there is some terminology to learn:

map graphic: The GIF file that is displayed in the document for the user to click on.
map definition file: A file that describes where the hotspots are located.
map processing cgi: CGI application that decides what to return based on where the user clicked.
map link: The HREF tag that tells where to find the map processing cgi.
map: Usually synonymous with "map graphic".

Now that you have that memorized, here's a quickie description of how maps are processed.

The client software requests a page which contains a map graphic. It also requests the graphic, and displays it in the page along with the text. The user clicks the mouse somewhere on the map graphic. The client software sends the coordinates of the mouseclick to WebSTAR, who sends it on to a CGI application (which was designated in the map link) for processing. The CGI application uses the mouseclick coordinates to determine which hot spot the mouse was in when it clicked (which button the user selected). It then returns the URL which is mapped to the hot spot. If no hot spot was clicked in, then the default URL is returned instead. The client software retrieves the page designated by the URL and shows it to the user. The user giggles with glee. All is well.

How to Create Map Graphics

There are two separate things to consider in creating a map graphic. The first, of course, is the instructions for creating a graphic file in the proper format. The second is the layout and look of the graphic.

Software for creating map graphics

The common format for graphics on the Web is the GIF file (Graphics Interchange Format). GIF was a free and publicly-described format from CompuServe and all graphics-capable clients are able to show GIF graphics inline with text. Unfortunately, the GIF format is currently in dispute because of a new patent granted to Unisys covering the compression scheme used in GIF files (Jan. 1995). Therefore, it might be necessary in the future to use some other format. CompuServe has promised a new GIF format that won't fall under the patent, but a likely successor is actually JPEG, which is nearly as widespread as GIF, produces even smaller files even in 24-bit color, and is already in use in by Netscape. For now, though, I'll pretend that all is well and show you how to create GIF map graphics.

If you are serious about making a nice looking map that will enhance the overall look of your site, you probably need two different graphics applications. The first one you need is a good paint and/or draw application to create the graphic. There are dozens of freeware and shareware applications, as well as some moderately priced commercial packages (I like Color-It), but for real fun you want either Adobe PhotoShop or Fractal Design Painter (or both). Get Kai's Power Tools as well. It's a blast!

The second thing you will probably need is an application to convert your nice graphic to GIF format. My favorite for this task is a shareware application called Graphic Converter (available at ftp.uwtc.washington.edu). It can import almost any graphic format used on any computer and convert them to common formats like GIF, JPEG, and PICT. The author is very timely about including new formats, so it is likely that whatever format is used for WWW graphics in the future, GraphicConverter will support it.

File format issues

If you can, save a copy of the map graphic in GIF format. If your paint application doesn't offer GIF, then try one of the following formats (in order of preference): JPEG, PICT, or TIFF. These are the most common formats on the Macintosh and GraphicConverter can easily convert them to GIF.

The name of the graphic should end in ".gif", and it should not have any spaces (they're a pain to deal with). When copying the graphic to the WWW site, I find it easiest to maintain a site if all of the map graphics are stored in a single folder. I recommend making a special folder for map graphics, called "grc" at the top level of your site (in the same folder as WebSTAR). Throughout the rest of this lesson, I will assume that you have done that.

Now that you have your map graphic and you have it saved in GIF format, there are two other options you might want to consider at this time: interlaced GIF files and transparent colors.

Interlaced GIF graphics are saved with their bytes in a different order. Instead of getting the picture in small but complete chunks, the interlaced GIF is transmitted in layers so that the user sees the entire picture in grainy detail that gradually improves as more data is transmitted. The advantage to interlaced GIF graphics is seen with the latest client software (such as Netscape Navigator), where the graphic is shown as it is received. With this software, the user can get a good idea of what the graphic is going to look like without having to wait for the entire download. The download can be stopped if the graphic is not what was wanted, or, in the case of a map, the map can be clicked on without waiting for the entire download.

Transparent colors is a feature offered with the GIF89a format. This allows you to select a color which will be made transparent to show the background (if there is one). Typically, the client software has a background color for each page and not only does every client use a slightly different color, but some allow the users to select the color. Since GIF graphics can only be saved in rectangular shapes, any irregular graphic will appear to be in a colored box which may or may not match the background color. By making the color of this box transparent, the client software replaces it with the color of the page background, which makes irregularly shaped graphics appear to fit right into the page. NOTE: Transparency may not be a good idea for use with maps. The Transparent regions are still part of the map and will return the default URL if clicked on.

If you are interested in either of these two options, you will need to get GraphicConverter v. 2.0.7 or later. Check out these Web66 pages for more information on these two options.

Graphic design issues

Now it is time to consider several of the design issues that make the difference between an ugly graphic and one that is an enhancement to your site. There are several points to keep in mind as you make the map graphic:

Few users have large color monitors. Make the graphic only as large as it needs to be to get the point across. I recommend that you stay less than 200 pixels high and 500 pixels wide if at all possible, and even that is a very large map for many people.
If you are using a 24-bit or higher paint program to create the map graphic, you will need to dither it down to 8 bit color (GIF only supports 8-bit color). When you do this, it is best if you don't use the System Palette. The System Palette works fine if you are only viewing the graphic on Macintosh computers, but other computers use a different set of 256 colors so the graphic might look very odd. Most of the better paint applications have a setting which makes a palette of the best 256 colors for that graphic. Use that setting (read the manual that came with the software to find out how).
When you convert 16- or 24-bit images to eight bit, you must use a dither pattern to get smooth shading of colors. Fine details and strong contrasts may be lost in the dither pattern, so keep it simple. If you can avoid fine gradiations in color, you can get by without dithering and the graphic may appear much sharper.
Try to view the graphic on a variety of systems before releasing it to the public so you have some idea of what they will be seeing.

Here are also a few tips on the overall design of your map graphic:

A map should present visual clues that provide the user with information about what types of choices are available. That might be something as simple as a panel of clearly labelled buttons, or a complex collage of graphic elements, or a representative graphic like a desktop or Starship console (did you get into that one?). Don't make the interface too confusing if you want people to actually use it.
As with all graphics on your site, the map graphic should fit in with the general theme or motif you have chosen.
I doubt that "universal symbols" actually exist. It never hurts to add some text to your buttons to clarify the choices.
Make sure people know the graphic is a map or they may just admire the picture and move on.

How Maps are Really Processed

A map works by using "hot" regions that act like buttons on the graphic. Each region has a URL assigned to it, so that clicks in that region are redirected to its URL. Regions can be rectangular, oval, or irregular (any multi-sided shape), and can be overlapped so almost any shape can be used as a button. A recent extension to the inline map is the Point. Like regions, points also have URL's associated with them. A map click uses the URL of the point that it is closest to. I've yet to see a map that uses points, so I'll ignore them for now.

The description of the buttons is kept in a map definition file. This is a text file where each line describes a button. For rectangular buttons, the line contains the top,left and bottom,right coordinates. For circular buttons, the line contains the center coordinates and radius of the circle. For oval buttons, the line contains a rectangle that bounds the oval. Irregularly shaped buttons have the x,y coordinates of each vertex on one line. Points have the x,y coordinate of the point stored on the line.

You saw in the first discussion about CGI applications a short (and heavily fantasized) discussion about how maps are processed. Let's dig in a little more deeply here to see what really happens.

The client loads a page containing a graphic. The graphic has the ISMAP tag and is embedded in a map link.
The user clicks on a portion of the map.
The client translates the click to a pair of X,Y coordinates where 0,0 represents the top-left corner of the graphic.
The client builds a new URL by appending the coordinates to the end of the URL that was in the link. The new URL will look like:
```
http://www.machine.org/MapReader.cgi?x,y
```
where x,y are the coordinates of the user click.
The client sends the URL to the WebSTAR server.
The server creates an Apple event containing the coordinates and sends that Apple event to the map processing CGI listed in the URL.
The CGI application receives the Apple event and extracts the coordinates.
Using one of various methods, the map processing CGI matches the coordinates to a URL (most map processing CGI's use a map definition file to do this).
The CGI application returns the URL, along with a "302 REDIRECT" code to tell WebSTAR to redirect the client to the new URL.
WebSTAR tells the client to try to get the new URL now.
The client tries to get the new URL and display it for the user.

Some of these steps have been extremely simplified (especially 4 and 8); we'll cover these in more depth later on. What you should get from this is that the real work is done by the client and the map processing CGI. WebSTAR (the server) has very little involvement, except to expedite communications between the two. This is not true on all servers. There are some servers where the server itself knows how to handle map requests. This is not the best way, though, since the server itself must be updated everytime a new map feature is developed.

How to Make Map Definition Files

The best tool I've found for this is WebMap. There are others, but this one seems to do everything I need just right. It will read PICT or GIF files, so you have a little flexibility in which graphic you use, although it is best to use the GIF file (more information here).

To use WebMap:

Open WebMap. Select "Preferences" under the "File" menu. This will allow you to choose whether to save the file in NCSA or CERN format. I recommend the NCSA format, although most map processing CGI's read both.
Open your map graphic in WebMap. The graphic will show in window in the left-hand pane. The right hand pane will contain the links for each hot spot as you add them.
Select "Set Default URL" from the "Options" menu. This URL is the one that will be used if the map click does not land in any of the hotspots.
Use the floating palette to select either a rectangle, circle (oval), or irregular polygon tool to make a hotspot. With the rectangle tool you click at one corner of the hot spot and drag to the opposite corner. With the circle tool, you have the option of drawing from the center or drawing a rectangle that bounds the circle. The latter option works just like the rectangle tool. For the irregular polygon, use the tool to click at the location of each vertex of the polygon until you have an enclosed region.
For each hotspot, edit the link in the right-hand pane to include the URL to which that spot should map. Use complete URL's which include the server name and full path relative to WebSTAR.
Once you have all of the hotspots set, save the file. This will save a special WebMap file which you can re-edit later. This is not the map definition file, though.
Now use the "Save as Text" option to save a map definition file. Give this file the same name as your graphic, except that you replace the ".gif" or ".jpg" extension with ".map". You are not required to use this naming scheme, but it will make it much easier later on to remember which definition file goes with which graphic.

Map Processing CGI Applications

At the risk of starting a holy war over which is the best map processing CGI, I will say that I have found MapServe, by Kelly Campbell, to be the best all-around choice for your map processing needs. It is fast (PowerPC native), flexible, and very stable.

To "install" MapServe, I recommend that you create a directory called "map" in the same folder as WebSTAR. Copy MapServe into this folder. It is now installed. Take a break. The reason I recommend putting it into its own older is that the map definition file be in the same folder as MapServe. Having a special folder for this will save you from having map definition files cluttering up the place. Also, the name "map" is short and mnemonic (although you're free to use whatever name you want). Note that you only need one copy of MapServe to handle all of your maps. Therefore, once you learn how to use MapServe correctly for one map, you know how to use it for all of them.

Remember back when I described how a map works, I told you that you embed the IMG link in an HREF link which points to the map processing CGI? No? Well, I did and now you want to make the URL point to MapServe. Continuing with our earlier example, the map line should now look like:

   <A HREF="/map/MapServe.acgi$test.map"><IMG SRC="/gif/test.gif" ISMAP></A>

This means that clicks on the "test.gif" map graphic are sent to MapServe in the directory "map" in the same folder as WebSTAR. The text after the "&" character tells MapServe which map definition file to use to tell where the map clicks go to.

Assorted Topics

The following are gleaned from messages sent to myself or the WebSTAR list by those who couldn't get a map working the first time. Read these before you venture out on your own and your chances of success will be greatly improved.

Common Problems

Symptom: You get a "File not found" error.
Solution: Quit MapServe and try again. If MapServe launches, then the problem is not MapServe, but the URL that it is trying to return. Look at the MapServe log and see what URL it was trying to access. If MapServe does not launch, then the problem is in the URL in the map line which is supposed to point to MapServe. Check for typographical errors and double-check the path.

Symptom: Page returned saying that your client doesn't handle maps properly.
Solution: Did you remember the ISMAP tag? Check the URL in the MapServe log window to be certain that both the map definition file name and the click coordinates are being sent.

Debugging Tips

When debugging your map setup, use MacWeb or Netscape. These allow you to edit the URL that was sent to the map processing CGI. This allows you to experiment with the possibility of a misspelling or incorrect path or file name without having to change the map page and reload it.
If you have trouble getting the URL in the map line to point to MapServe, try typing in a direct URL. Don't bother adding the map definition file name or coordinates. Just make sure you can find it and get it to launch first.
You must be running WebSTAR (or some HTTP server) to use maps. If you load a map page from disk, the graphic will display, but no coordinates will be sent to the map processing CGI. That is the function of WebSTAR.
Use MapServe's log window to get feedback about possible problems.

Tips on using Maps

Maps are fun, but it is easy to overdo it. By the same token, it is easy to become persuaded that maps are frivolous or too strenuous on your server when in actuality they are exactly what you should be using. Here are some tips with absolutely no basis in experimental fact:

Server Load

Yes, maps place an additional load on your WebSTAR server. This can happen in two ways. First, there is extra memory and CPU needed for the map processing CGI application to run. Second, WebSTAR has to hand off the map click information and wait for the return information. The first one can be minimized by using as fast a map as you can. That means not only using fast imagemap processing software, but also keeping your map no more complex than is necessary. The second factor can be minimized by using asynchronous CGI applications (you did read my pages on CGI applications, didn't you?) so that WebSTAR can continue to process other connections while the map processing is going on.

No matter what you do, though, the map will place some extra load on your server. Therefore, make sure you really need (or really, really want) the map before you go throwing them all over your site.

Simplification

A map can be a good way to simplify your site and provide a sense of continuity for users. If you have several small graphics (five or more) that you use as a menu of selections, then you might benefit from converting this to a single map graphic. The benefit comes because each graphic requires the client to open another connection. On most clients, openning a connection is almost as slow as downloading a small graphic. On Netscape, it is not as slow because it can open multiple simultaneous connections. However, if you have six or seven graphics, that means Netscape can quickly load your server by trying to open seven or eight connections at once. Thus, using one map reduces the number of connections required by the client to get the entire page. In addition, with a map you control how the graphics are displayed in relation to one another, instead of counting on proper line wrapping in the client.

Text Alternatives

Amazing as it seems, there are still several text-only clients for the World Wide Web and people are still using them. Lynx is one that is very popular with GUI-phobes (in the true political tradition of calling anyone opposed to your opinion an "X-phobe"), and Emacs has a WWW browsing mode. In addition, there are large numbers of people who have only slower connections (14.4K or less) who eschew graphics where possible to get better speed.

If you want to provide support for these people, there are two things you can do. The first is to use the "ALT" option, which provides a text alternative to replace a graphic in a page. The text you type in this option will be displayed instead of the graphic when a text-only client is used. The second thing to do is to create a text menu to duplicate your map graphic. Often this text menu can actually enhance the map, by providing an explanation of each option, in addition to the text link. Neither of these are difficult to do, so unless you're a real graphics snob, you probably want to use one or both of these ideas.

[ Back to Extending WebSTAR ]

Jon Wiederspan
Last Edited: April 26, 1995
Copyright Jon Wiederspan, 1994,1995